<template>
  <div class="info-wrapper">
    <el-form class="form-detail" :label-width="labelWidth">
      <el-row v-for="(pItem, pIdx) in list" :key="'pItem' + pIdx">
        <el-col :span="cItem.col ? cItem.col : 8" v-for="(cItem, cIdx) in pItem" :key="'cItem' + cIdx">
          <dg-form-item :label="cItem.label + '：'">
            <qb-showlable
              v-if="cItem.type === 'time'"
              :values="cItem.value"
              type="DATE"
              format="yyyy-MM-dd HH:mm:ss"
            ></qb-showlable>
            <!-- <span class="value" v-if="cItem.type === 'time'">{{ cItem.value | filterDate }}</span> -->
            <span v-else-if="cItem.type === 'slot'" class="value b-ellipsis">
              <slot :name="cItem.field" :data="cItem"></slot>
            </span>
            <span v-else-if="cItem.type === 'text'">
              <!-- 有表码的，用表码方式进行翻译显示 -->
              <span v-if="cItem.code">
                <!-- {{ cItem.value.split(',')  }} -->
                  <span v-if="cItem.value" v-code="{[cItem.code]:cItem.value}"></span> 
                   <span v-else>-</span>
              </span>
              <span v-else> {{ cItem.value | filterText }}</span>
            </span>
            <span v-else class="value b-ellipsis" :title="cItem.tooltip ? cItem.value : ''">
              <!-- 有表码的，用表码方式进行翻译显示 -->
              <span v-if="cItem.code">
                   <span v-if="cItem.value && typeof(cItem.value) == 'string'" v-code="{[cItem.code]:cItem.value}">-</span>
                   <span v-else-if="cItem.value && typeof(cItem.value) != 'string'" style="margin-right: 5px;" v-for="(item,index) in cItem.value" :key="index" >
                    <span v-code="{[cItem.code]:item}"></span>
                  </span>
                  <span v-else>-</span>  
              </span>
              <span v-else> {{ cItem.value | filterText }}</span>
            </span>
          </dg-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'detail-form',
  props: {
    labelWidth: {
      type: String,
      default: '8em'
    },
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  methods: {},
  components: {},
  computed: {}
};
</script>
<style lang="scss" scoped>
.info-wrapper {
  /deep/.el-form-item{
    margin-bottom: 0;
  }
  .form-detail {
    .value {
      display: inline-block;
      width: 100%;
    }
  }
}
</style>
